<template>
	<view class="global">
		<view class="dingqi">
			<text>定期理财</text>
			<text class="ding-chao">超500,000+人购买</text>
		</view>
		<view class="dingqi-js">
			甄选金融机构优质产品，收益稳健、期限丰富。可挑选多 <br />
			款不同期限的产品，省心投资、安心持有。</view>
		<view class="columns" v-for="(item,index) in isHotData" :key="index"
			@click="jumpDetail(item.fid,item.sellTimeName,item.sumCount)">
			<view class="columns-one">
				<view class="columns-dio">{{item.typeName}}</view>
				<view class="columns-dit"></view>
				<view class="columns-dith">{{item.fname}}</view>
			</view>
			<view class="columns-dior" style="background: url(https://z3.ax1x.com/2021/04/16/cfZ5O1.png)">
				<view class="columns-back">明星产品</view>
			</view>
			<view class="columns-bai">
				<view class="bai">
					<view class="bai-zuo">{{item.yieldRates}}<text>%</text></view>
					<view class="bai-you">{{item.selledCount}}天</view>
				</view>
				<view class="columns-baix">
					<view class="baix-xz">业绩比较基准</view>
					<view class="baix-xy">{{item.minimumMoney}}元起购</view>
				</view>
				<view class="columns-xianshi">
					<view class="xianshi-left">{{item.purchasingArray[0]}}</view>
					<view class="xianshi-right">{{item.purchasingArray[1]}}</view>
				</view>
				<view class="right-qiangou">
					<view class="qiangou-btn">
						<image src="https://z3.ax1x.com/2021/04/16/cfZTw6.png"></image>
						<text>去抢购</text>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="top-tabbar">
				<view @tap="viewTabBtn(index)" class="tabbar-item" :class="{ active: start == index }"
					v-for="(item, index) in swiperTab" :key="item">
					<text>{{ item }}</text>
				</view>
			</view>
			<swiper class="swiper-tab" :current="start" @change="tabchange">
				<swiper-item>
					<view class="swiper-item">
						<view class="swiper-item1" @click="jumpDetail(item.fid,item.sellTimeName,item.sumCount)"
							v-for="(item,index) in list" :key="index">
							<view class="swiper-top">
								<view class="swiper-top1">
									{{item.typeName}}
									<view class="top1-dit"></view>
									{{item.fname}}
								</view>
								<view class="swiper-top2" v-for="(item2,index2) in item.purchasingArray" :key="index2">
									{{item.purchasingArray[index2]}}
								</view>

							</view>
							<view class="swiper-button">
								<view class="swiper-button1">
									<view class="swiper1">{{item.yieldRates}}<text>%</text></view>
									<view class="swiper2">业绩比较基准</view>
								</view>
								<view class="swiper-button1">
									<view class="swiper3">{{item.selledCount}}天</view>
									<view class="swiper4">{{item.productType}}</view>
								</view>
								<view class="tou-yuantu" v-if="item.sellTimeName">
									<view class="riqi">{{item.sellTimeName[0]}}</view>
									<view>{{item.sellTimeName[1]}}</view>
								</view>
								<view class="tou-yuantu2" v-if="item.sumCount==0">
									<view class="yishouxin">已售馨</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item" v-for="(item,index) in sixTiemData" :key="index"
						@click="jumpDetail(item.fid,item.sellTimeName,item.sumCount)">
						<view class="swiper-top">
							<view class="swiper-top1">
								<view class="top1-dio">{{item.typeName}}</view>
								<view class="top1-dit"></view>
								<view class="top1-dith">{{item.fname}}</view>
							</view>
							<view class="swiper-top2">{{item.purchasingArray[0]}}</view>
							<view class="swiper-top2">{{item.purchasingArray[1]}}</view>
						</view>
						<view class="swiper-button">
							<view class="swiper-button1">
								<view class="swiper1">{{item.yieldRates}}<text>%</text></view>
								<view class="swiper2">业绩比较基准</view>
							</view>
							<view class="swiper-button1">
								<view class="swiper3">{{item.selledCount}}天</view>
								<view class="swiper4">{{item.productType}}</view>
							</view>
							<view class="tou-yuantu" v-if="item.sellTimeName">
								<view class="riqi">{{item.sellTimeName[0]}}</view>
								<view>{{item.sellTimeName[1]}}</view>
							</view>
							<view class="tou-yuantu2" v-if="item.sumCount==0">
								<view class="yishouxin">已售馨</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="swiper-item1" @click="jumpDetail(item.fid,item.sellTimeName,item.sumCount)"
							v-for="(item,index) in threeTiemData" :key="index">
							<view class="swiper-top">
								<view class="swiper-top1">
									<view class="top1-dio">{{item.typeName}}</view>
									<view class="top1-dit"></view>
									<view class="top1-dith">{{item.fname}}</view>
								</view>
								<view class="swiper-top2">{{item.purchasingArray[0]}}</view>
								<view class="swiper-top2">{{item.purchasingArray[1]}}</view>
							</view>
							<view class="swiper-button">
								<view class="swiper-button1">
									<view class="swiper1">{{item.yieldRates}}<text>%</text></view>
									<view class="swiper2">业绩比较基准</view>
								</view>
								<view class="swiper-button1">
									<view class="swiper3">{{item.selledCount}}天</view>
									<view class="swiper4">{{item.productType}}</view>
								</view>
								<view class="tou-yuantu" v-if="item.sellTimeName">
									<view class="riqi">{{item.sellTimeName[0]}}</view>
									<view>{{item.sellTimeName[1]}}</view>
								</view>
								<view class="tou-yuantu2" v-if="item.sumCount==0">
									<view class="yishouxin">已售馨</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="swiper-item1" @click="jumpDetail(item.fid,item.sellTimeName,item.sumCount)"
							v-for="item in oneTiemData" :key="item.fid">
							<view class="swiper-top">
								<view class="swiper-top1">{{item.fname}}</view>
								<view class="swiper-top2">{{item.purchasingArray[0]}}</view>
								<view class="swiper-top2">{{item.purchasingArray[1]}}</view>
							</view>
							<view class="swiper-button">
								<view class="swiper-button1">
									<view class="swiper1">{{item.yieldRates}}<text>%</text></view>
									<view class="swiper2">业绩比较基准</view>
								</view>
								<view class="swiper-button1">
									<view class="swiper3">{{item.selledCount}}天</view>
									<view class="swiper4">{{item.productType}}</view>
								</view>
								<view class="tou-yuantu" v-if="item.sellTimeName">
									<view class="riqi">{{item.sellTimeName[0]}}</view>
									<view>{{item.sellTimeName[1]}}</view>
								</view>
								<view class="tou-yuantu2" v-if="item.sumCount==0">
									<view class="yishouxin">已售馨</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<view class="floot" @click="jumpJannel">
					没有找到合适的产品？去逛逛基金吧
					<image src="https://z3.ax1x.com/2021/04/17/c4Q13V.png"></image>
				</view>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState
	} = createNamespacedHelpers('regular');
	export default {
		data() {
			return {
				swiperTab: ["全部", "60天", "60天-1年", "1年以上"],
				start: 0,
			};
		},
		async onLoad() {
			await this.getRegular();
		},
		computed: {
			...mapState(["list", "isHotData", "sixTiemData", "threeTiemData", "oneTiemData"])
			
		},

		methods: {
			...mapActions(["getRegular"]),
			viewTabBtn(index) {
				this.start = index;
			},
			tabchange(e) {
				this.start = e.target.current;
			},
			jumpDetail(id, sellTimeName, sumCount) {
				uni.navigateTo({
					url: `../regularDetail/regularDetail?id=${id}&sellTimeName=${sellTimeName}&sumCount=${sumCount}`
				});
			},
			jumpJannel() {
				uni.navigateTo({
					url: '../channel/channel'
				});
			}
		},
	};
</script>

<style>
	.header {
		width: 750rpx;
		height: 88rpx;
		background: #ffffff;
		display: flex;
		text-align: center;
		line-height: 88rpx;
	}

	.header-left {
		margin-left: 24rpx;
		width: 48rpx;
		height: 48rpx;
		background: #ffffff;
	}

	.header-left image {
		width: 14rpx;
		height: 26rpx;
	}

	.header-center {
		width: 144rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		line-height: 88rpx;
		color: #333333;
		opacity: 1;
		margin-left: 232rpx;
	}

	.dingqi {
		margin-top: 30rpx;
	}

	.dingqi text {
		width: 176rpx;
		height: 60rpx;
		font-size: 44rpx;
		font-family: PingFang SC;
		font-weight: 800;
		line-height: 60rpx;
		color: #333333;
		opacity: 1;
		margin-left: 24rpx;
	}

	.dingqi .ding-chao {
		width: 204rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #333333;
		opacity: 1;
		margin-left: 322rpx;
	}

	.dingqi-js {
		width: 702px;
		height: 84rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 44rpx;
		color: #666666;
		opacity: 1;
		margin: 24rpx;
	}

	.columns {
		width: 702rpx;
		height: 258rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.05);
		opacity: 1;
		border-radius: 12rpx;
		margin: 24rpx;
		position: relative;
	}

	.columns-one {
		display: flex;
	}

	.columns-dio {
		width: 130rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
		margin-top: 24rpx;
		margin-left: 24rpx;
	}

	.columns-dit {
		width: 0rpx;
		height: 24rpx;
		border: 1rpx solid #cccccc;
		background-color: #CCCCCC;
		opacity: 1;
		margin-top: 30rpx;
		margin-left: 10rpx;
	}

	.columns-dith {
		width: 220rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
		margin-top: 24rpx;
		margin-left: 10rpx;
	}

	.columns-dior {
		width: 132rpx;
		height: 44rpx;
		background-repeat: no-repeat;
		position: absolute;
		top: 0rpx;
		left: 566rpx;
		text-align: center;
		line-height: 44rpx;
	}

	.columns-back {
		height: 40rpx;
		font-size: 24rpx;
		color: #ffffff;
	}

	.columns-bai .bai {
		width: 400rpx;
		height: 46rpx;
		display: flex;
		margin-top: 30rpx;
		margin-left: 24rpx;
	}

	.bai-zuo {
		width: 130rpx;
		height: 54rpx;
		font-size: 44rpx;
		font-weight: 600;
		line-height: 34rpx;
		color: #f85656;
		opacity: 1;
	}

	.bai-zuo text {
		font-size: 30rpx;
	}

	.bai-you {
		width: 120rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 44rpx;
		color: #333333;
		opacity: 1;
		margin-left: 120rpx;
	}

	.columns-baix {
		display: flex;
		width: 400rpx;
		height: 34rpx;
		margin-left: 24rpx;
	}

	.baix-xz {
		width: 148rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #999999;
		opacity: 1;
	}

	.baix-xy {
		width: 146rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		margin-left: 80rpx;
	}

	.columns-xianshi {
		width: 260rpx;
		height: 36rpx;
		display: flex;
		margin-left: 24rpx;
		margin-top: 22rpx;
		text-align: center;
	}

	.xianshi-left {
		width: 110rpx;
		height: 34rpx;
		background: #f9f2e8;
		opacity: 1;
		border-radius: 4rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #be7f22;
	}

	.xianshi-right {
		width: 110rpx;
		height: 34rpx;
		background: #f9f2e8;
		opacity: 1;
		border-radius: 4rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #be7f22;
		margin-left: 20rpx;
	}

	.right-qiangou {
		width: 164rpx;
		height: 62rpx;
		background: #3476f1;
		opacity: 1;
		border-radius: 32rpx;
		text-align: center;
		line-height: 62rpx;
		position: absolute;
		top: 104rpx;
		left: 500rpx;
	}

	.right-qiangou image {
		width: 22.12rpx;
		height: 25.02rpx;
		margin-right: 8rpx;
	}

	.right-qiangou text {
		width: 84rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #ffffff;
		opacity: 1;
	}

	.top-tabbar {
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;
		background-color: #fefefe;
	}

	.top-tabbar .tabbar-item {
		color: #999999;
		font-size: 24rpx;
		width: 130rpx;
		height: 48rpx;
		line-height: 48rpx;
		margin-right: 40rpx;
		text-align: center;
	}

	.top-tabbar .active {
		color: #ffffff;
		background-color: #3476f1;
		font-size: 28rpx;
		font-weight: 600;
		border-radius: 4rpx;
	}

	.swiper-tab {
		height: 1750rpx;
		box-shadow: #8f8f94 0px 0px 20rpx -3px;
		margin-top: 20rpx;
		padding: 30rpx;
	}

	.swiper-item1 {
		width: 700rpx;
		height: 188rpx;
		border-bottom: 0.1rpx solid #fafafa;
	}

	.swiper-top {
		display: flex;
		margin-top: 20rpx;
	}

	.scrolly {
		height: 200vh;
	}

	.swiper-top .swiper-top1 {
		width: 300rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: 600;
		word-break: keep-all;
		/* 不换行 */
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 内容超出宽度时隐藏超出部分的内容 */
		text-overflow: ellipsis;

	}

	.top1-dit {
		width: 0rpx;
		height: 24rpx;
		border: 1rpx solid #cccccc;
		background-color: #CCCCCC;
		opacity: 1;
		margin: 0rpx 10rpx;
	}

	.swiper-top .swiper-top2 {
		margin-left: 10rpx;
		font-size: 20rpx;
		width: 102rpx;
		height: 34rpx;
		text-align: center;
		line-height: 34rpx;
		background-color: #fcf5ec;
		color: #be7f22;
		margin-top: 4rpx;
	}

	.swiper-top .swiper-top3 {
		margin-left: 10rpx;
		font-size: 20rpx;
		width: 132rpx;
		height: 34rpx;
		text-align: center;
		line-height: 34rpx;
		background-color: #fcf5ec;
		color: #be7f22;
	}

	.swiper-button {
		width: 100%;
		height: 142rpx;
		display: flex;
	}

	.swiper-button .swiper-button1 {
		width: 274rpx;
		background-color: #ffffff;
	}

	.swiper-button .swiper-button1 .swiper1 {
		font-size: 44rpx;
		color: #f85656;
		margin-top: 26rpx;
		font-weight: 600;
	}

	.swiper1 text {
		font-size: 30rpx;
	}

	.swiper-button .swiper-button1 .swiper2 {
		margin-top: 14rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.swiper-button .swiper-button1 .swiper3 {
		font-size: 32rpx;
		margin-top: 35rpx;
		font-weight: 600;
	}

	.swiper-button .swiper-button1 .swiper4 {
		display: flex;
		margin-top: 18rpx;
		font-size: 24rpx;
		color: #999999;
		align-items: center;
	}

	.tail .tes {
		margin: 40rpx auto;
		width: 750rpx;
		height: 60rpx;
		font-size: 24rpx;
		color: #999999;
		font-weight: 600;
		text-align: center;
		line-height: 60rpx;
	}

	.shuxian {
		width: 0rpx;
		font-size: 22rpx;
		border: 1rpx solid #cccccc;
		opacity: 1;
		margin: 10rpx;
	}

	.shuxian2 {
		height: 22rpx;
		width: 1rpx;
		background-color: #CCCCCC;
		opacity: 1;
		margin: 0rpx 10rpx;
		padding-top: 2rpx;
	}

	.tou-yuantu {
		width: 136rpx;
		height: 138rpx;
		background: url("https://z3.ax1x.com/2021/04/16/cfZbFO.png") no-repeat;
		background-size: cover;
		color: #f85656;
		text-align: center;
		line-height: 30rpx;
		font-size: 20rpx;
	}

	.riqi {
		margin-top: 45rpx;
	}

	.tou-yuantu2 {
		width: 136rpx;
		height: 138rpx;
		background: url("https://z3.ax1x.com/2021/04/19/cosQpt.png") no-repeat;
		background-size: cover;
		color: #f85656;
		text-align: center;
		line-height: 100rpx;
		font-size: 20rpx;
	}

	.tou-yuantu2 .yishouxin {
		font-size: 24rpx;
		color: #999;
		transform: rotate(-30deg);
		margin-top: 12rpx;
	}

	.floot {
		width: 432rpx;
		height: 38rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #999999;
		opacity: 1;
		position: absolute;
		bottom: 10rpx;
		left: 140rpx;
	}

	.floot image {
		width: 10rpx;
		height: 22rpx;
		opacity: 1;
		margin-left: 8rpx;
		margin-top: 10rpx;
	}
</style>
